<template>
	<view class="bankList">
		<u-sticky soffset-top="200">
			<view class="search">
				<u-search @change="changeHandle" placeholder="请输入开户银行全称(含支行)" v-model="keyword"
					:action-style="{color:'white'}" search-icon-color="#357cd4"></u-search>
			</view>
		</u-sticky>
		<view class="bankBox" v-if="bankBranchList.length > 0">
			<view class="search-item" v-for="(item,index) in bankBranchList" :key="index" @click="bankChoose(item)">
				{{item.bankName}}</view>
		</view>
		<view v-else class="bankBox">
			<u-empty text="没有搜索结果" mode="search" margin-top="150"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				bankBranchList: []
			}
		},
		methods: {
			changeHandle() {
				this.getBank();
			},
			getBank() {
				if (!this.keyword) {
					this.bankBranchList = [];
					return
				}
				this.$u.api.bankList({
					content: this.keyword,
					page: 1,
					size: 100
				}).then(res => {
					this.bankBranchList = res.data.list;
				})
			},
			bankChoose(item) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.bankBranchName = item.bankName;
				prevPage.$vm.form.bankBranchId = item.bankBranchId;
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	.bankList {
		.search {
			padding: 30rpx;
			background-color: #357cd4;
		}

		.bankBox {
			.search-item {
				padding: 24rpx 30rpx;
				border-bottom: 1px solid #f2f2f2;
				font-size: 28rpx;
			}
		}

	}
</style>
